<template>
  <div class="load-more-container">
    <!-- 加载更多按钮（长条状带箭头） -->
    <button
        v-if="hasMore"
        class="load-more-bar"
        @click="handleClick"
        :disabled="isLoading"
    >
      <!-- 左侧文本区域 -->
      <span class="bar-text">
        {{ !isLoading ? (buttonText || '加载更多') : '加载中...' }}
      </span>

      <!-- 右侧箭头/加载动画 -->
      <div class="bar-indicator">
        <div v-if="isLoading" class="loading-dot"></div>
        <span v-else class="arrow-icon">▼</span>
      </div>
    </button>

    <!-- 无更多内容状态（保持长条状一致性） -->
    <div v-else-if="showNoMore" class="no-more-bar">
      <span class="no-more-text">已显示全部内容</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isLoading: { type: Boolean, default: false },
    hasMore: { type: Boolean, default: true },
    buttonText: { type: String, default: '加载更多' },
    showNoMore: { type: Boolean, default: true }
  },
  methods: {
    handleClick() {
      if (!this.isLoading) this.$emit('load-more');
    }
  }
};
</script>

<style scoped>
.load-more-container {
  padding: 15px 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 长条状按钮基础样式 */
.load-more-bar {
  width: 90%;
  max-width: 700px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: #f5f7fa;
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  color: #4e5969;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 悬停效果 */
.load-more-bar:not(:disabled):hover {
  background-color: #edf0f5;
  border-color: #d1d7e3;
}

.load-more-bar:not(:disabled):hover .arrow-icon {
  transform: translateY(2px); /* 箭头微下移，增强交互感 */
  color: #2c83f2;
}

/* 禁用状态（加载中） */
.load-more-bar:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

/* 文本与箭头布局 */
.bar-text {
  font-weight: 500;
}

.bar-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 箭头样式 */
.arrow-icon {
  font-size: 18px;
  color: #86909c;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* 加载动画（替换箭头） */
.loading-dot {
  width: 20px;
  height: 20px;
  border: 2px solid #c9cdD4;
  border-top-color: #2c83f2;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}

/* 无更多内容样式（保持长条状） */
.no-more-bar {
  width: 90%;
  max-width: 700px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  color: #b0b0b0;
  font-size: 14px;
}

/* 旋转动画 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .load-more-bar, .no-more-bar {
    width: 95%;
    height: 46px;
    font-size: 14px;
  }
  .arrow-icon {
    font-size: 16px;
  }
}
</style>